<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>【抖音短视频】记录美好生活-Douyin.com</title>
        <link rel="shortcut icon" href="picture/favicon_v2_7145ff0.ico" type="image/x-icon">
        <link href="universal.css" rel="stylesheet" charset="UTF-8"type="text/css">  <!-- 通用样式 -->
        <link href="bgCSS.css" rel="stylesheet" charset="UTF-8" type="text/css"> <!-- 背景图片样式 -->
        <link href="headCSS.css" rel="stylesheet" charset="UTF-8" type="text/css"> <!-- head部分css样式 -->
        <link href="midCSS.css" rel="stylesheet" charset="UTF-8" type="text/css"> <!-- middle部分css样式 -->
        <link href="footCSS.css" rel="stylesheet" charset="UTF-8" type="text/css"> <!-- foot部分样式 -->
    </head>
    <body>
        <!-- 背景部分 -->
        <div class="bg">
            <video id="video-play" muted data-autoplay data-object-fit loop="loop" autoplay src="video/douyinTV.mp4">抱歉，您的浏览器不支持内嵌视频</video>
        </div>
        <!-- 前景部分 -->
        <div class="wrapper">
            <!-- head部分 -->
            <div class="head">
                <div class="head-left">
                    <a href="https://www.douyin.com/" style="height: 100%">
                        <img src="picture/logo_left.png" alt="logo" style="height: 45px">
                    </a>
                </div>
                <div class="head-right">
                    <div class="head-link">
                        <a href=https://creator.douyin.com/" class="link">创作服务平台</a>
                        <div class="create-table">原【视频上传】已并入此功能</div>
                    </div>
                    <div class="head-link">
                        <a href="https://open.douyin.com/" class="link">开放平台</a>
                    </div>
                    <div class="head-link  hover">
                        <a class="link pro"  href="">系列产品</a>
                        <div class="menu">
                            <a href="https://www.huoshanzhibo.com/" class="menulink">抖音火山版</a>
                            <a href="https://lv.ulikecam.com/" class="menulink">剪映</a>
                            <a href="https://www.duoshanapp.com/" class="menulink">多闪</a>
                        </div>
                    </div>
                    <div class="head-link hover">
                        <a class="link pro" href="">抖音直播</a>
                        <div class="menu">
                            <a href="https://union.bytedance.com/open/" class="menulink">直播机构入驻</a>
                        </div>
                    </div>
                    <div class="head-link hover">
                        <a class="link pro">合作入驻</a>
                        <div  class="menu">
                            <a href="https://www.douyin.com/mcn/" class="menulink">MCN入驻</a>
                            <a href="https://www.douyin.com/platform/effect" class="menulink">抖音特效师</a>
                            <a href="https://musician.douyin.com/" class="menulink">抖音音乐人</a>
                            <a href="https://www.douyin.com/certification/agency/enter/" class="menulink">社会机构入驻</a>
                        </div>
                    </div>
                    <div class="head-link hover">
                        <a class="link pro">企业合作</a>
                        <div class="menu">
                            <a href="https://e.douyin.com/" class="menulink">企业服务平台</a>
                            <a href="https://renzheng.douyin.com/api/welcome/?fiji_source=douyin" class="menulink">企业认证</a>
                            <a href="https://www.douyin.com/resource/douyin?source=dou" class="menulink">广告投放</a>
                        </div>
                    </div>
                    <div class="head-link">
                        <a class="link" href="https://www.douyin.com/aboutus/">联系我们</a>
                    </div>
                    <div class="head-link">
                        <div id="unmute" onclick="test()"></div>
                    </div>
                </div>
            </div>
            <!-- middle部分 -->
            <div class="middle">
                <div class="mid-top">
                    <img src="picture/slogan_2_8d59f13.png" alt="slogan" style="width: 100%">
                </div>
                <div class="mid-bottom">
                    <div class="store">
                        <a class="iso" href="https://itunes.apple.com/cn/app/%E6%8A%96%E9%9F%B3%E7%9F%AD%E8%A7%86%E9%A2%91/id1142110895?l=zh&ls=1&mt=8"></a>
                    </div>
                    <div class="store">
                        <a class="android" href="http://s.toutiao.com/UsMYE/"></a>
                    </div>
                    <a class="store QRcode"></a>
                </div>
            </div>
            <!-- foot部分 -->
            <div class="foot">
                <nav class="nav">
                    <spa>|</spa><a href="https://www.douyin.com/cnl_music/music_tab/" style="padding: 0 5px;color: #fff">音乐</a>
                    <spa>|</spa><a href="https://www.douyin.com/agreement/" style="padding: 0 5px;color: #fff">用户服务协议</a>
                    <spa>|</spa><a href="https://www.douyin.com/privacy/" style="padding: 0 5px;color: #fff">隐私政策</a>
                    <spa>|</spa><a href="https://www.douyin.com/recovery_account/" style="padding: 0 5px;color: #fff">账号找回</a>
                    <spa>|</spa><a href="https://www.douyin.com/resource/douyin?source=dou" style="padding: 0 5px;color: #fff">广告投放</a>
                    <spa>|</spa><a href="https://www.douyin.com/business_license/" style="padding: 0 5px;color: #fff">营业执照</a>
                </nav>
                <div class="back-info">
                    <p>
                        <span>2020</span>&nbsp;©&nbsp;抖音&nbsp;&nbsp;|&nbsp;京ICP备16016397号-3&nbsp;|&nbsp;北京微播视界科技有限公司 |&nbsp; 京B2-20170846</p>
                    <p>
                        <a href="http://www.12377.cn/" target="_blank">中国互联网举报中心 </a>
                        &nbsp;|&nbsp;网络文化许可证-京网文-（2016）2282-264号&nbsp;|&nbsp;客户服务热线：400-992-2556&nbsp;|&nbsp;违法和不良信息举报：400-140-2108&nbsp;|&nbsp;举报邮箱：jubao@douyin.com
                    </p>
                    <div>
                        <img src="picture/gongan_d0289dc.png">
                        <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802023605">京公网安备 11010802023605号</a>
                        <span>&nbsp; | &nbsp;地址&nbsp;:&nbsp;北京市海淀区知春路51号4层408&nbsp;</span>
                    </div>
                </div>
            </div>
        </div>
    </body>
    <script type="text/javascript">
        function  test() {
            console.log("hahah");
        }
        (
            function () {
                /* 打开音乐和关闭音乐 */
                let mute = document.getElementById("unmute");
                let video = document.getElementById("video-play")
                let action = function () {
                    if (video.muted) {
                        mute.style.backgroundImage = "url(picture/mute_acbcfbc.png)";
                    } else {
                        mute.style.backgroundImage = "url(picture/unmute_1bbc0c3.png)";
                    }
                    video.muted = !video.muted;
                };
                mute.addEventListener("click", action, false);

                /* 获取下拉菜单 */
                let link = document.getElementsByClassName("link pro");
                for(let i=0;i<link.length;i++){
                    let ele=link[i];
                    ele.parentNode.onmousemove=function () {
                        ele.nextElementSibling.style.display="block";
                    }
                    ele.parentNode.onmouseout=function(){
                        ele.nextElementSibling.style.display="none";
                    }
                    ele.nextElementSibling.onmousemove=function () {
                        ele.nextElementSibling.style.display="block";
                    }
                    ele.nextElementSibling.onmouseout=function () {
                        ele.nextElementSibling.style.display="none";
                    }
                }

                /* 更改下拉连接的背景颜色 */
                let menulink=document.getElementsByClassName("menulink");
                for(let i=0;i<menulink.length;i++){
                    let ele=menulink[i];
                    ele.onmouseenter=function () {
                            ele.style.backgroundColor="rgba(51,51,51,.1)";
                    }
                    ele.onmouseleave=function () {
                            ele.style.backgroundColor="#fff";
                    }
                }
            }
        )();
    </script>
</html>